<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="web-resume">
    <!--内容-->
    <div class="home me-cell">
      <div class="container-center">
        <el-row>
          <el-col :span="7" class="text-center">
            <div :style="bgImage(meData.pcMeHomeIconUrl)" class="home-icon w-round w-image-fit"/>
          </el-col>
          <el-col :span="15" class>
            <h1 class="home-title">{{ meData.home_title }}</h1>
            <a :href="meData.home_jianli" class="home-jianli">简历</a>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--关于我-->
    <div class="about-me me-cell">
      <el-row class="container-center">
        <el-col :span="12" class>
          <p class="me-item-title">关于我</p>
          <p v-for="(v, k) in meData.aboutArr" :key="k" class="me-item-detil">{{ v }}</p>
        </el-col>
        <el-col :span="12" class="zuopin">
          <p class="me-item-title w-text-center">作品</p>
          <el-row class>
            <el-col v-for="(v, k) in productionps" :key="k" :span="8" class="item">
              <div
                v-lazy:background-image="v.pcMeCover || defaultImage"
                class="zuopin-item w-hover-float-shadow"
                @click="productionpItemClick(v)"
              />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--专业技能-->
    <div class="expertise me-cell container-center">
      <el-row class>
        <el-col :span="10" class>
          <p class="me-item-title">专业技能</p>
          <p v-for="(v, k) in meData.expertiseArr" :key="k" class="me-item-detil">{{ v }}</p>
        </el-col>
        <el-col :span="14" class>
          <ul class="zuopin">
            <li style="cursor: pointer" @click="progressClick('iOS', meData.iosShow)">
              <p class="me-item-subtitle">iOS</p>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="meData.iosNum"/>
            </li>
            <li style="cursor: pointer" @click="progressClick('Web前端', meData.webShow)">
              <p class="me-item-subtitle">Web前端</p>
              <el-progress
                :text-inside="true"
                :stroke-width="18"
                :percentage="meData.webNum"
                status="exception"
              />
            </li>
            <li style="cursor: pointer" @click="progressClick('Node.js', meData.nodeShow)">
              <p class="me-item-subtitle">Node.js</p>
              <el-progress :text-inside="true" :stroke-width="18" :percentage="meData.nodeNum"/>
            </li>
            <li style="cursor: pointer" @click="progressClick('微信小程序', meData.xcxShow)">
              <p class="me-item-subtitle">微信小程序</p>
              <el-progress
                :text-inside="true"
                :stroke-width="18"
                :percentage="meData.xcxNum"
                status="success"
              />
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>

    <!--工作经验-->
    <div class="experience me-cell show-cell">
      <el-row>
        <el-col :span="8" class>
          <p class="me-item-title">工作经验</p>
          <p v-for="(v, k) in meData.experience_showArr" :key="k" class="me-item-detil">{{ v }}</p>
        </el-col>
        <el-col :span="16" class="right-row">
          <el-row>
            <el-col v-for="(study, index) in studyArr" :key="index" :span="8" class="item">
              <div
                v-lazy:background-image="study.pcMePic || defaultImage"
                @click="studyCellClick(study)"
                class="icon w-hover-float-shadow"
              >
                <p class="work-name">{{ study.title }}</p>
                <el-popover width="250" trigger="hover" placement="top">
                  <p>描述：{{ study.describe }}</p>
                  <div slot="reference" class="name-wrapper works-icon-info">
                    <span class="el-icon-warning"/>
                  </div>
                </el-popover>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--公司-->
    <div class="works me-cell show-cell">
      <el-row>
        <el-col :span="8" class>
          <p class="me-item-title">工作经历</p>
          <p v-for="(v, k) in meData.works_showArr" :key="k" class="me-item-detil">{{ v }}</p>
        </el-col>
        <el-col :span="16" class="right-row">
          <el-row>
            <el-col v-for="(work, index) in meData.works" :key="index" :span="8" class="item">
              <a :href="work.url" target="_blank">
                <div
                  v-lazy:background-image="work.pcMeIcon || defaultImage"
                  class="icon w-hover-float-shadow"
                >
                  <p class="work-name">{{ work.name }}</p>
                  <el-popover width="250" trigger="hover" placement="top">
                    <p>时间：{{ work.timeIntervalStr }}</p>
                    <p>职责：{{ work.obligation }}</p>
                    <p>说明：{{ work.detil }}</p>
                    <div slot="reference" class="name-wrapper works-icon-info">
                      <span class="el-icon-warning"/>
                    </div>
                  </el-popover>
                </div>
              </a>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--联系我-->
    <div class="contact me-cell container-center">
      <p class="me-item-title w-text-center">意见反馈</p>
      <el-form :model="feedbackForm" class="demo-form-inline">
        <el-row>
          <el-col :span="12">
            <el-form-item
              :rules="[
                { required: true, message: '姓名/昵称不能为空'}
              ]"
              label="姓名/昵称"
              label-width="90px"
              prop="name"
            >
              <el-input v-model="feedbackForm.name" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Phone" label-width="90px">
              <el-input v-model="feedbackForm.phone" placeholder="请输入手机号(不会泄露)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ" label-width="90px">
              <el-input v-model="feedbackForm.qq" placeholder="请输入QQ(不会泄露)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信" label-width="90px">
              <el-input v-model="feedbackForm.wx" placeholder="请输入微信(不会泄露)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          :rules="[{ required: true, message: '意见/建议意见不能为空'}]"
          label="意见/建议"
          label-width="90px"
          prop="content"
        >
          <el-input v-model="feedbackForm.content" type="textarea"/>
        </el-form-item>
        <el-form-item label="是否显示到意见列表" label-width="150px">
          <el-switch v-model="feedbackForm.isShow"/>
        </el-form-item>
        <el-form-item class="w-text-center">
          <el-button
            :loading="btnIsSubmit"
            :disabled="!feedbackForm.content || !feedbackForm.name"
            type="danger"
            @click="onSubmit"
          >提交建议</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import MeModel from "@/models/MeModel";
import StudyModel from "@/models/StudyModel";
import ProductModel from "@/models/ProductModel";
import FeedBackModel from "@/models/FeedBack";
import WConfig from "@/config";
import { Component, Vue, Inject } from "vue-property-decorator";
import { Getter } from "vuex-class";
import FeedBack from "@/models/FeedBack";
import WPopView from '@/utils/popView'
import BaseModel from "@/models/BaseModel";

@Component({})
export default class WebResume extends Vue {
  @Inject()
  private bgImage!: (
    url: string,
    style?: CSSStyleDeclaration
  ) => CSSStyleDeclaration;

  @Getter("defaultImage") defaultImage!: string;

  // 我的数据
  private meData: MeModel = new MeModel();
  // 反馈模型
  private feedbackForm = new FeedBackModel();
  // 按钮是否正在提交
  private btnIsSubmit = false;
  // 学习数组
  private studyArr: StudyModel[] = [];
  // 作品数组
  private productionps: ProductModel[] = [];

  constructor() {
    super();
  }

  mounted() {
    // 获取网络数据
    this.getMeData();
    this.getStudyData();
    this.getProduction();
  }

  // 获取所有的数据
  getMeData() {
    MeModel.getModel()
      .then((data: any) => {
        this.meData = data;
      })
      .catch(() => {});
  }

  // 获取最新三个的学习数据
  getStudyData() {
    StudyModel.getMeStudyData()
      .then((dataArr: any) => {
        this.studyArr = dataArr;
      })
      .catch(() => {});
  }

  // 获取需要显示的作品
  getProduction() {
    ProductModel.getMeProductData()
      .then((dataArr: any) => {
        this.productionps = dataArr;
      })
      .catch(() => {});
  }

  // 作品cell点击
  productionpItemClick(item: BaseModel) {
    window.open(`${WConfig.pcHtml}#/web/works/detail?id=${item._id}`);
  }

  // 学习cell点击
  studyCellClick(item: BaseModel) {
    window.open(`${WConfig.pcHtml}/#/web/conclusion/detail?id=${item._id}`);
  }

  // 进度条点击
  progressClick(title: string, content: string) {
    const showArr = content.split("\n");
    let showStr = "<div>";
    showArr.forEach(v => {
      showStr += "<p>";
      showStr += v;
      showStr += "</p>";
    });
    showStr += "</div>";
    this.$alert(showStr, title, {
      closeOnClickModal: true,
      dangerouslyUseHTMLString: true,
      showConfirmButton: false
    })
      .then(() => {})
      .catch(() => {});
  }

  // 提交数据
  private onSubmit() {
    this.btnIsSubmit = true;
    this.feedbackForm
      .addFeedBack()
      .then(() => {
        this.btnIsSubmit = false;
        WPopView.msgSuccess('提交成功')
        this.feedbackForm = new FeedBackModel();
      })
      .catch(() => {
        this.btnIsSubmit = false;
      });
  }
}
</script>

<style lang="scss" scoped>
.web-resume {
  /*全局*/
  > .me-cell {
    border-bottom: 1px solid rgb(230, 230, 230);
    padding: 50px 10px;
    box-sizing: border-box;
  }

  .me-item-title {
    font-style: normal;
    font-weight: 200;
    letter-spacing: 0px;
    font-size: 30px;
  }

  .me-item-subtitle {
    font-style: normal;
    font-weight: 200;
    margin: 15px 0 0 10px;
    letter-spacing: 0px;
    font-size: 16px;
    color: #878787;
  }

  .me-item-detil {
    font-style: normal;
    font-weight: 200;
    letter-spacing: 0px;
    font-size: 20px;
    color: #878787;
  }

  /*顶部个人信息*/
  /*home*/
  > .home {
    padding: 120px 0;

    .home-icon {
      width: 150px;
      height: 150px;
    }

    .home-title {
      color: #878787;
      font-size: 40px;
      font-weight: 300;
      letter-spacing: 0.2px;
    }

    .home-jianli {
      font-size: 20px;
      color: darkgrey;
    }

    .home-jianli:hover {
      color: #333;
    }
  }

  /*about me*/
  .about-me {
  }

  .zuopin {
    list-style: none;

    .zuopin-item {
      width: 130px;
      border-radius: 50%;
      height: 130px;
      margin: 0 auto;
      background-size: cover;
      background-position: center;
      cursor: pointer;
    }

    .item:nth-child(n + 4) {
      margin-top: 30px;
    }
  }

  .show-cell {
    .icon {
      width: 200px;
      height: 200px;
      border-radius: 20px;
      position: relative;
      cursor: pointer;
      background-position: center;
      background-size: cover;
      margin: 0 auto;
    }

    .item:nth-child(n + 4) {
      margin-top: 50px;
    }

    .icon:hover .work-name {
      text-shadow: 0 0 1px #fff;
      color: #333;
      bottom: 50px;
      font-size: 20px;
      transition: all 1s;
    }

    .work-name {
      position: absolute;
      width: 100%;
      bottom: 10px;
      color: #aaa;
      padding: 0 30px;
      text-align: center;
      box-sizing: border-box;
      transition: all 1s;
    }

    .works-icon-info {
      position: absolute;
      top: 10px;
      right: 13px;
      font-size: 20px;
      color: #fff;
    }
  }

  /*contact*/
  .contact {
  }

  .contact-cell {
    padding: 0 10px !important;
  }
}
</style>

